<template>
  <div class="budgetLedgerPage">
      <div class="search-wrap d-flex a-center flex-wrap">
          <div class="search-item d-flex a-center m-b10">
              <label>部门</label>
              <el-select v-model="form.departmentId" class="m-l5" placeholder="请选择部门">
                  <el-option v-for="(item,index) in departmentList" :key="index" :label="item.deptName" :value="item.deptId"></el-option>
              </el-select>
          </div>
          <div class="search-item d-flex a-center m-l20 m-b10">
              <label>项目名称</label>
              <el-input v-model="form.projectName" class="m-l5" placeholder="请输入项目名称"></el-input>
          </div>
          <div class="search-item d-flex a-center m-l20 m-b10">
              <label>年度</label>
              <el-date-picker
                      class="m-l10"
                      clearable
                      v-model="form.year"
                      value-format="YYYY"
                      size="large"
                      type="year"
                      placeholder="请选择"
              />
          </div>
          <div class="search-item d-flex a-center m-l20 m-b10">
              <label>月度</label>
              <el-select class="m-l10" v-model="form.monthly">
                  <el-option v-for="i in 12" :key="i" :label="i+`月`" :value="i"></el-option>
              </el-select>
          </div>
          <div class="search-item d-flex a-center m-l20 m-b10">
              <label>计划类型</label>
              <el-select class="m-l10" v-model="form.type">
                  <el-option label="计划内" value="1"></el-option>
                  <el-option label="计划外" value="2"></el-option>
              </el-select>
          </div>
          <div class="search-item d-flex a-center m-l20 m-b10">
              <el-button
                  color="#fc702b"
                  style="color:#fff;"
                  @click.prevent="onQuery"
              >查询</el-button>
              <el-button
                  color="#f0f0f0"
                  style="color: #000000"
                  @click.prevent="onReset"
              >重置</el-button>
          </div>
          <el-divider direction="vertical" class="m-b10" />
          <div class="search-buttons m-b10">
              <el-button
                  v-if="localGet('DepartmentId')==='4342714503178637155'"
                  class="button_edit"
                  @click="onInitiateProcess"
              >
                  发起流程
              </el-button>
              <el-button
                      class="button_edit"
                      @click="onExport"
              >
                  <svg-icon icon-class="project-detail-icon-derive" class="icon-export m-r5"></svg-icon>
                  一键导出
              </el-button>
          </div>
      </div>
      <public-table
          ref="publicTableRef"
          class="m-t20"
          index
          :page="page"
          :tableData="tableData"
          :tableOption.sync="tableOption"
          @page-change="onPageChange"
          @handleSelectionChange="handleSelectionChange"
      >
      </public-table>
  </div>
</template>

<script setup>

import {exportApi, fundManagementApi} from "@/api/businessFinance";
import {onMounted, reactive, ref} from "vue";
import {ElDivider, ElSelect, ElOption, ElDatePicker, ElMessage} from "element-plus";
import PublicTable from "@/components/PublicTable.vue";
import {exportExcelFile, localGet, resetForm} from "@/common/utils/GlobalUtils";

const page = reactive({
    total: 0,
    current: 1,
    size: 10
});

const tableData = ref([]);

const tableOption = ref([
  { label: "部门", prop: "departmentName", minWidth: 100 },
  { label: "项目名称 ", prop: "mainProjectName", minWidth: 100 },
  { label: "年度 ", prop: "year", minWidth: 80 },
  { label: "季度 ", prop: "quarter", minWidth: 80 },
  { label: "月度 ", prop: "monthly", minWidth: 80 },
  { label: "相关项目 ", prop: "projectName", minWidth: 80 },
  { label: "合同编号 ", prop: "contractId", minWidth: 80 },
  { label: "资金预算金额 ", prop: "budgetAmount", minWidth: 120 },
  { label: "资金预算科目 ", prop: "subjectName", minWidth: 120 },
  { label: "在途资金数 ", prop: "executeFunds", minWidth: 100 },
  { label: "剩余资金数 ", prop: "residueAmount", minWidth: 100 },
  { label: "执行数 ", prop: "executeAmount", minWidth: 80 },
  { label: "差异金额 ", prop: "differenceAmount", minWidth: 80 },
  { label: "执行率 ", prop: "implementationRate", minWidth: 80 },
  { label: "差异原因 ", prop: "reason", minWidth: 80 },
]);

const form = reactive({
    departmentId:'',
    projectName:'',
    year:'',
    monthly:'',
    type:''
});

const departmentList = ref([]);
const getDepartmentVo = () => {
    fundManagementApi.getDepartmentVo().then(res=>{
        departmentList.value = res.data;
    });
}

const getFundBudgetExecuteRecordVo = (param) => {
    fundManagementApi.getFundBudgetExecuteRecordVo(param).then(res=>{
        tableData.value = res.data.content;
        page.total = res.data.totalSize;
    });
}

const onQuery = () => {
    page.current = 1;
    page.size = 10;
    let param = {
        param: {
            ...form
        },
        pageNum: page.current,
        pageSize: page.size
    };
    getFundBudgetExecuteRecordVo(param);
}

const onReset = () => {
    resetForm(form);
    page.current = 1;
    page.size = 10;
    let param = {
        pageNum: page.current,
        pageSize: page.size
    };
    getFundBudgetExecuteRecordVo(param);
}

const onPageChange = (e) => {
    page.current = e.page;
    page.size = e.limit;
    let param = {
        param: {
            ...form
        },
        pageNum: page.current,
        pageSize: page.size
    };
    getFundBudgetExecuteRecordVo(param);
}

const exportList = ref([]);
const handleSelectionChange = (e) => {
    exportList.value = e;
}

const onExport = () => {
    exportApi.getFundBudgetExecuteRecordLeadingOut(form).then(res=>{
        if(res){
            exportExcelFile(res,'资金预算台账表');
        }
    });
}

/**
 * 发起流程
 *
 */
const fundBudgetExecuteRecordInitiateProcess = (param,callback) => {
    fundManagementApi.fundBudgetExecuteRecordInitiateProcess(param,callback).then(res=>{
        if(res.code==='200'){
            if(callback)callback(res);
        }
    });
}

/**
 * 发起流程按钮
 *
 */
const publicTableRef = ref(null);
const onInitiateProcess = () => {
    if(exportList.value.length===0){
        ElMessage.warning('请选择要发起流程的数据!');
        return;
    }
    fundBudgetExecuteRecordInitiateProcess({
        ...exportList.value[0],
    },()=>{
        ElMessage.success('发起流程成功!');
        exportList.value = [];
        publicTableRef.value.clearSelection();
    });
}

onMounted(()=>{
    getDepartmentVo();
    getFundBudgetExecuteRecordVo({
        pageNum: 1,
        pageSize: 10
    });
});
</script>

<style lang="scss" scoped>
.budgetLedgerPage{
  .search-wrap{
    .search-item{
      .el-input{
        width: auto !important;
      }
    }
    .search-buttons{
      .icon-export{
        width: 18px;
        height: 18px;
      }
    }
  }
}
</style>
